iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 12
0
Modern Web

前端網頁設計學習旅程系列 第 12

Day12_HTML語法-Text&Font

  • 分享至 

  • xImage
  •  

font-family

首先用文章產生器,產生用作練習的文章的HTML檔案

<!DOCTYPE html>
<html>
<head>
	<title>Font and Text</title>
	<link rel="stylesheet" type="text/css" href="fonts.css">
</head>
<body>


<h1>
	Font Demo Page
</h1>
<p>
	Fatback picanha ground round ribeye prosciutto. Drumstick chislic picanha beef ribs strip steak meatloaf chicken cupim leberkas rump buffalo alcatra. Burgdoggen prosciutto strip steak biltong ball tip shank meatball, sausage beef ribs cupim sirloin. Meatloaf burgdoggen filet mignon, landjaeger tail doner meatball kevin boudin alcatra. Kevin drumstick ham andouille picanha flank bresaola pig capicola turkey kielbasa.
</p>
	
<p>
	Bresaola doner hamburger boudin flank burgdoggen spare ribs. Corned beef kielbasa t-bone, short ribs cow sirloin pancetta short loin jerky meatball turducken. Pork loin boudin hamburger cupim ball tip picanha filet mignon meatloaf fatback, kielbasa burgdoggen landjaeger sausage. Swine porchetta ribeye pork cow pork chop doner tenderloin ham chuck. Turkey brisket landjaeger drumstick leberkas swine sirloin porchetta pastrami chuck pork chop fatback.
</p>
</body>
</html>

並且關聯到CSS

p {
	font-family: Arial Black;
}
h1 {
	font-family: Georgia;
}

呈現的結果如圖
https://ithelp.ithome.com.tw/upload/images/20200924/201305037QQ4IG9WyS.png
有提供的字型可以參考 CSSFontStack

font-size in px

另外也可以改變字體的大小

h1 {
	font-family: Georgia;
	font-size: 100px;
}

結果如圖
https://ithelp.ithome.com.tw/upload/images/20200924/20130503DKiD7NwLdx.png

font-size in em

另外一種字體大小改變的表示方式為em
如果我們想呈現下面的圖片
https://ithelp.ithome.com.tw/upload/images/20200924/20130503RvCyMApSDa.png
可以用字體大小的相對關係定義CSS

body {
	font-size: 10px;
}
p {
	font-size: 2.0em;
}
h1 {
	font-size: 5.0em;
}
span {
	font-size: 2.0em;
}

並且在HTML加上span tag就可以完成

<!DOCTYPE html>
<html>
<head>
	<title>Font and Text</title>
	<link rel="stylesheet" type="text/css" href="fonts.css">
</head>
<body>


<h1>
	Font Demo Page
</h1>
<p>
	Fatback picanha ground round ribeye prosciutto. <span>Drumstick chislic picanha </span> beef ribs strip steak meatloaf chicken cupim leberkas rump buffalo alcatra. Burgdoggen prosciutto strip steak biltong ball tip shank meatball, sausage beef ribs cupim sirloin. Meatloaf burgdoggen filet mignon, landjaeger tail doner meatball kevin boudin alcatra. Kevin drumstick ham andouille picanha flank bresaola pig capicola turkey kielbasa.
</p>
	
<p>
	Bresaola doner hamburger boudin flank burgdoggen spare ribs. Corned beef kielbasa t-bone, short ribs cow sirloin pancetta short loin jerky meatball turducken. Pork loin boudin hamburger cupim ball tip picanha filet mignon meatloaf fatback, kielbasa burgdoggen landjaeger sausage. Swine porchetta ribeye pork cow pork chop doner tenderloin ham chuck. Turkey brisket landjaeger drumstick leberkas swine sirloin porchetta pastrami chuck pork chop fatback.
</p>
</body>
</html>

font-weight

字重的調整方式有兩種,第一種是用數字定義自重,數值從100~800

h1 {
    // font-weight可以從100~800
	font-weight: 400;
}

結果如圖
https://ithelp.ithome.com.tw/upload/images/20200924/20130503a6URq0uhQS.png

第二種是預定義的文字類型

h1 {
	font-weight: bold;
}

結果如圖
https://ithelp.ithome.com.tw/upload/images/20200924/201305030zXfEHw8C2.png

line-height

可以用line-height定義行高

p {
	line-height: 1.5;
}

結果如圖
https://ithelp.ithome.com.tw/upload/images/20200924/201305038B3lIhcibn.png

text-align

可以透過text-align定義對齊方式

h1 {
	text-align: center;
}

結果如下
https://ithelp.ithome.com.tw/upload/images/20200924/20130503YUm0WOdyY4.png

text-decoration

text-decoration則提供更多文字的風格選擇

p {
	text-decoration: underline;
}

結果如圖
https://ithelp.ithome.com.tw/upload/images/20200924/20130503oMM6kEfmIR.png


上一篇
Day11_CSS語法-border&selector
下一篇
Day13_CSS語法-margin&padding
系列文
前端網頁設計學習旅程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言